<template>
	<view class="imp-content">
		<u-navbar z-index="1000" :background="{background: '#F1F2F4'}" :border-bottom="borderBottom" title-size="40rpx"
			:title="$t('完善信息')" @rightClick="rightClick" :autoBack="true" />

		<scroll-view scroll-y="true" class="scroll-Yscr">
			<view class="imp-block">
				<view class="imp-block1">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('公司名称')}}</view>
					</view>
					<u-input v-model="model.username" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入公司名称')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('联系人')}}</view>
					</view>
					<u-input v-model="model.truename" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入真实姓名')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('联系电话')}}</view>
					</view>
					<u-input v-model="model.mobile" type="number" placeholder-style="color: #999999;font-size: 24rpx;"
						input-align="right" :placeholder="$t('请输入联系电话')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('身份证号')}}</view>
					</view>
					<u-input v-model="model.idnum" type="number" placeholder-style="color: #999999;font-size: 24rpx;"
						input-align="right" :placeholder="$t('请输入您的身份证号')"></u-input>
				</view>
				<view class="imp-block1-1">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('所在区域')}}</view>
					</view>
					<view style="width: 200rpx;display: flex;align-items: center;justify-content: flex-end;">

						<formCity :label="model.area_id[2].label" key="citySelectVue" style="min-width: 100rpx;" :texthidden="true" :is_register="1"
							:item="cityItemState" :is_port="true" @change="selCityState" />

					</view>
				</view>
				<view class="imp-block1">
					<view style="min-height: 86rpx;display: flex;align-items: flex-start;">
						<view class="imp-flex">
							<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;"
								src="@/static/index2/index26.png" mode=""></image>
							<view>{{$t('详细地址')}}</view>
						</view>
					</view>
					<u-input v-model="model.reg_address" type="textarea" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入详细地址')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<view>Email</view>
					</view>
					<u-input v-model="model.email" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入邮箱')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<view>{{$t('传真')}}</view>
					</view>
					<u-input v-model="model.fax" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入传真')"></u-input>
				</view>
				<view class="imp-block1">
					<view class="imp-flex">
						<view>{{$t('网站')}}</view>
					</view>
					<u-input v-model="model.weblink" input-align="right"
						placeholder-style="color: #999999;font-size: 24rpx;" :placeholder="$t('请输入网站')"></u-input>
				</view>

				<view class="imp-block1-2">
					<view class="imp-flex">
						<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index26.png"
							mode=""></image>
						<view>{{$t('运输工具(可多选)')}}</view>
					</view>
					<view
						style="font-size: 24rpx;color: #999999;display: flex;align-items: center;flex: 1;justify-content: flex-end;"
						@click="handeleTools">
						<view v-if="model.provide_transport.length === 0">{{$t('请选择')}}</view>
						<view v-else>
							<span style="color: #1D1D1D;">
								{{ model.provide_transport.map(item => $t(item) ).join(', ') }}</span>
						</view>
						<view style="width: 32rpx;height: 32rpx;">
							<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;"
								src="@/static/index2/index21.png" mode=""></image>
						</view>

					</view>
				</view>

				<!-- 运输路线 -->
				<view class="imp-block2">
					<view class="imp-block3">
						<view class="imp-block5">
							<view style="font-size: 26rpx;color: #1D1D1D;">{{$t('运输路线(可添加多个)')}}</view>
							<view v-if="model.transport_list.length<10"
								style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
								<image @click="handeleAdd" style="width: 25rpx;height: 25rpx;"
									src="@/static/index2/index22.png" mode=""></image>
							</view>

						</view>
						<view class="imp-block6" v-for="(item,index) in model.transport_list" :key="index">
							<view
								style="width: 100%;display: flex;align-items: flex-end;justify-content: space-between;">
								<view class="imp-block4">
									<view class="imp-block7">
										<view
											style="min-width: 187rpx;display: flex;justify-content: flex-start;font-size: 24rpx;">
											{{$t('发站城市')}}
										</view>
										<view
											style="min-width: 187rpx;display: flex;justify-content: flex-start;font-size: 24rpx;margin-left: 56rpx;">
											{{$t('到站城市')}}
										</view>
									</view>
									<view class="imp-block8">
										<view class="imp-block9">
											<view @click="handeleEchodisplayStart(index,'start')">
												<view v-if="!item.departureCity"
													style="color: #999999;font-size: 24rpx;">{{$t('请选择')}}</view>
												<u-notice-bar v-else speed="30" type="none" font-size="24rpx"
													:volume-icon="icon" mode="horizontal"
													:list="[item.departureCity]"></u-notice-bar>
											</view>
										</view>
										<view class="imp-block10">
											<view class="imp-one"></view>
										</view>
										<view class="imp-block9">
											<view @click="handeleEchodisplayEnd(index,'end')">
												<view v-if="!item.arrivingCity"
													style="color: #999999;font-size: 24rpx;">{{$t('请选择')}}</view>

												<u-notice-bar v-else speed="30" type="none" font-size="24rpx"
													:volume-icon="icon" mode="horizontal"
													:list="[item.arrivingCity]"></u-notice-bar>

											</view>
										</view>
									</view>
								</view>
								<image @click="handeleItemIndex(index)" v-if="model.transport_list.length>1"
									style="width: 25rpx;height: 25rpx;" src="@/static/index2/index23.png" mode="">
								</image>
							</view>

						</view>
					</view>
				</view>
				<view class="imp-block11">{{$t('公司介绍')}}</view>
				<view class="imp-block12">
					<textarea v-model="model.main_product" disable-default-padding="true" maxlength="200"
						placeholder-style="color:#999999;font-size: 22rpx;" :placeholder="$t('填写公司介绍')"
						style="font-size: 22rpx;" />
				</view>

				<view class="imp-block13">{{$t('企业资质照片(选填)')}}</view>
				<view class="imp-block14">
					<view class="imp-block14-upload">
						<fileUploadCustomVue ref="Custom1" :files.sync="model.license_image" :max-count="1"
							file-type="image">
							<template v-slot:additional-content>
								<div @click="upload1" class="imp-Custom1">
									<image style="width: 50rpx;height: 50rpx;" src="@/static/index2/index24.png"
										mode="">
									</image>
									<view style="
									font-size: 22rpx;
									color: #999999;
									margin-top: 12rpx;
									width: 100%;
									text-align: center;">{{$t('上传企业LOGO')}}
									</view>
								</div>
							</template>
						</fileUploadCustomVue>
					</view>
					<view class="imp-block14-upload">
						<fileUploadCustomVue ref="Custom2" :files.sync="model.product_image" :max-count="1"
							file-type="image">
							<template v-slot:additional-content>
								<div @click="upload2" class="imp-Custom1">
									<image style="width: 50rpx;height: 50rpx;" src="@/static/index2/index24.png"
										mode="">
									</image>
									<view style="font-size: 22rpx;color: #999999;margin-top: 12rpx;">{{$t('上传企业营业执照')}}
									</view>
								</div>
							</template>
						</fileUploadCustomVue>
					</view>
				</view>
				<view class="imp-block15">{{$t('宣传视频(必填)')}}</view>
				<view class="imp-block16">
					<fileUploadCustomVideoVue ref="Custom3" :files.sync="model.buy_videos" :max-count="1"
						file-type="video">
						<template v-slot:additional-content>
							<div @click="upload3" class="imp-Custom2">
								<image style="width: 50rpx;height: 50rpx;" src="@/static/index2/index24.png" mode="">
								</image>
								<view style="color: #999999;font-size: 22rpx;margin-top: 12rpx;">{{$t('点击上传宣传视频')}}
								</view>
							</div>
						</template>
					</fileUploadCustomVideoVue>
				</view>
				<view class="imp-block17">{{$t('企业宣传图(最多3个)')}}</view>
				<view class="imp-block18">
					<fileUploadVue :files.sync="model.shop_image" :max-count="3" file-type="image" />
				</view>
				<!-- <view style="width: 100%;height: 38rpx;"></view> -->
			</view>
		</scroll-view>

		<view style="margin-top: 25rpx;">
			<u-button :loading="loading" :disabled="loading" style="font-size: 28rpx;" class="imp-but"
				@click="submit">{{$t('确认完善')}}</u-button>
		</view>

		<SelectCity key="key" :is_port="is_port" :is_register="is_register" v-model="city_show" @change="confirm"
			:select_city_new="select_city_new" :select_city_newd="select_city_newd"></SelectCity>
		<u-popup v-model="show" mode="bottom" border-radius="30" height="800">
			<view>
				<xiaolu-tree ref="fessionalType" label-name="name" value-name="id" :checkList="fessional_checkedArr"
					:treeNone="fessionalList" @sendValue="fun_treeChange($event,'运输')" :props="meeting_props"
					:isCheck="true" :searchIf="false" v-if="fessionalList.length>0" />
			</view>
		</u-popup>
		<u-popup v-model="shows" mode="bottom" border-radius="30" >
			<view class="pup_blocks">
				<view class="pup_blocks_title">{{$t('运输工具')}}</view>
				<view @click="handeleItemAdd(item)" 
				:class="model.provide_transport.includes(item)?'pup_blocks_index_active':'pup_blocks_index'" 
				v-for="(item,index) in TransportationTools" :key="index">
					<view>{{$t(item)}}</view>
				</view>
				<view class="pup_blocks_submit" @click="handelePup">{{$t('确定')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import xiaoluTree from '@/components/xiaolu-tree/tree.vue';
	import citySelectVue from './components/citySelect.vue'
	import fileUploadVue from './components/fileUpload.vue'
	import fileUploadCustomVue from './components/fileUploadCustom.vue'
	import fileUploadCustomVideoVue from './components/fileUploadCustomVideo.vue'
	import SelectCity from "@/components/page/SelectCityNew.vue"
	import formCity from './components/formCitys.vue'
	export default {
		components: {
			fileUploadVue,
			fileUploadCustomVue,
			fileUploadCustomVideoVue,
			citySelectVue,
			xiaoluTree,
			SelectCity,
			formCity
		},
		data() {
			return {
				shows:false,
				cityItemState: {
					key: "city_id",
					label: false,
					placeholder: this.$t('请选择'),
					type: "city",
					required: true,
					value: [
						0,655,656
					],
					rules: {},
				},
				loading: false,
				select_city_new: [],
				select_city_newd: [],
				is_port: true,
				is_register: 0,
				city_show: false,
				fessional_checkedArr: [], //选择的数据
				fessionalList: [],
				meeting_props: {
					label: 'name',
					children: 'children',
					multiple: true,
					nodes: false,
					hasPath: false
				},
				show: false, //运输工具显示隐藏控制
				icon: false,
				textRegion: this.$t('请选择'),
				textStart: this.$t('请选择'),
				textEnd: this.$t('请选择'),
				borderBottom: false,
				backgrounds: '#F1F2F4',
				model: {
					username: '', //公司名称
					truename: '', //联系人（真实姓名）
					mobile: '', //联系电话
					idnum: '', //身份证号码
					area_id: [], //所在区域
					reg_address: '', //详细地址
					email: '', //邮箱
					fax: '', //传真
					weblink: '', //网站
					provide_transport: [], //运输工具
					transport_list: [{
						departureCity: '',
						arrivingCity: '',
						departureid: '',
						arrivingid: '',
						days: 0
					}], //运输路线
					main_product: '', //公司介绍
					product_image: [], //企业logo
					license_image: [], //营业执照 （资质证明）
					buy_videos: [], //企业宣传视频
					shop_image: [], //企业宣传图

				},
				lang: 'zh',
				startIndex: 0,
				endIndex: 0,
				type: '',
				Tools:['汽运','空运'],
				TransportationTools:['汽运','空运','海运','铁路','不限']
			}
		},
		onLoad(options) {
			this.getLang()
			// 运输工具
			this.getMess()
			console.log('model:', JSON.parse(options.model));
			this.model = JSON.parse(options.model)
		},
		onShow() {
		
		// "空运,汽运,海运,铁路,不限"
		
		// "Воздушный, автомобильный, морской, железнодорожный, неограниченный "
		},
		methods: {
			handelePup(){
				this.shows = false
			},
			handeleItemAdd(item){
				if(this.model.provide_transport.includes(item)){
					let index = this.model.provide_transport.indexOf(item)
					this.model.provide_transport.splice(index,1)
				}else{
					this.model.provide_transport.push(item)
				}
			},
			// 提交
			submit() {

				if (this.model.username == '') {
					uni.showToast({
						title: this.$t('请输入公司名称'),
						icon: 'none'
					})
				} else if (this.model.truename == '') {
					uni.showToast({
						title: this.$t('请输入真是姓名'),
						icon: 'none'
					})

				} else if (this.model.mobile == '') {
					uni.showToast({
						title: this.$t('请输入联系电话'),
						icon: 'none'
					})
				} else if (this.model.idnum == '') {
					uni.showToast({
						title: this.$t('请输入身份证号'),
						icon: 'none'
					})
				} else if (this.model.area_id.length == 0) {
					uni.showToast({
						title: this.$t('请选择所在区域'),
						icon: 'none'
					})
				} else if (this.model.reg_address == '') {
					uni.showToast({
						title: this.$t('请输入详细地址'),
						icon: 'none'
					})
				} else if (this.model.provide_transport == '') {
					uni.showToast({
						title: this.$t('请选择运输工具'),
						icon: 'none'
					})
				} else if (this.model.buy_videos.length == 0) {
					uni.showToast({
						title: this.$t('请上传企业视频'),
						icon: 'none'
					})
				} else {
					this.handeleSubmit()
				}
			},
			// 调提交接口
			handeleSubmit() {
				uni.showLoading()
				this.loading = true
				// this.model.country_name = this.lang=='zh'?0:1
				this.model.transport_list = this.model.transport_list.map(item => `${item.departureid},${item.arrivingid},${item.days}`)
					.join(';');
				// this.model.transport_list = result
				this.model.provide_transport = this.model.provide_transport.toString()
				try{
					this.model.buy_videos = this.model.buy_videos.map(item=>{
							return{
								url:item
							}
						})
				}catch(e){
					//TODO handle the exception
				}
				
				try{
					this.model.license_image = this.model.license_image.map(item=>{
						return{
							url:item
						}
					})
				}catch(e){
					//TODO handle the exception
				}
				try{
					this.model.shop_image=this.model.shop_image.map(item=>{
						return{
							url:item
						}
					})
				}catch(e){
					//TODO handle the exception
				}
				try{
					this.model.product_image = this.model.product_image.map(item=>{
						return{
							url:item
						}
					})
				}catch(e){
					//TODO handle the exception
				}
				
				this.$u.api.user.transportProfile(this.model).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: this.$t('操作成功'),
						icon: 'none'
					})
					this.loading = false
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			// 新选择省市区
			confirm(e) {
				if (this.type == 'start') {
					this.model.transport_list[this.startIndex].departureCity = e[2].label
					this.model.transport_list[this.startIndex].departureid = e[2].value
					this.type = ''
					this.startIndex = 0
				} else {
					this.model.transport_list[this.endIndex].arrivingCity = e[2].label
					this.model.transport_list[this.endIndex].arrivingid = e[2].value
					this.type = ''
					this.endIndex = 0
				}

			},
			// ref发站城市
			handeleEchodisplayStart(index, value) {
				this.city_show = true
				this.startIndex = index
				this.type = value
				this.key = index
			},
			// ref到站城市
			handeleEchodisplayEnd(index, value) {
				this.city_show = true
				this.endIndex = index
				this.type = value
				this.key = index
			},
			handeleTools() {
				// this.show = true
				this.shows = true
			},
			// 选择运输方式
			fun_treeChange(e, value) {
				let es = e.map(item => {
					return item.name
				})
				this.model.provide_transport = es
				this.show = false
			},
			// 运输方式
			getMess() {
				uni.showLoading()
				let data = {
					type: 'release_transport',
					pid: 0
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					res.length > 0 && res.map((item, index) => {
						let obj = {
							user: true,
							name: this.lang == 'zh' ? item.name : item.name_ru,
							children: [],
							id: item.id,
						}
						this.fessionalList.push(obj)
					})
					
					console.log('获取的运输方式:',this.fessionalList);
					console.log('详情过来的数据:',this.model.provide_transport);
					
					let arrlist = []
					if (this.model.provide_transport.length > 0) {
						this.model.provide_transport.forEach((item,index) => {
							this.fessionalList.forEach(ite => {
								
									if (item === ite.name) {
										arrlist.push({
											id: ite.id,
											name: ite.name,
											path: '',
											user: true
										})
									}
								
								
							})
						})
					}
					
					this.fessional_checkedArr = arrlist
					uni.hideLoading()
				})
			},
			// 所在区域
			citySelectCbRegion(e) {
				this.textRegion = e.column3.label
			},
			// 删除运输路线
			handeleItemIndex(index) {
				uni.showModal({
					title: this.$t('确认删除'),
					content: this.$t('是否确认删除当前运输路线'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.model.transport_list.splice(index, 1)
						} else if (res.cancel) {}
					}
				});

			},
			selCityState(key, value) {

				this.model.area_id.push(value[0])
				this.model.area_id.push(value[1])
				this.model.area_id.push(value[2])
			},
			// 新增运输路线
			handeleAdd() {
				this.model.transport_list.push({
					departureCity: '',
					arrivingCity: '',
					days: 0
				})
			},

			upload1() {
				this.$refs.Custom1.upload();
			},
			upload2() {
				this.$refs.Custom2.upload();
			},
			upload3() {
				this.$refs.Custom3.upload();
			},
			rightClick() {
				uni.navigateBack()
			},
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	.pup_blocks_submit{
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%), #5282E6;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 100rpx;
	}
	.pup_blocks_title{
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
	}
	.pup_blocks_index{
		width: 100%;
		height: 100rpx;
		border: 1rpx solid #D8D8D8;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.pup_blocks_index_active{
		width: 100%;
		height: 100rpx;
		border: 1rpx solid #5282E6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #5282E6;
		color: #FFFFFF;
	}
	.pup_blocks{
		width: 100%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.scroll-Yscr {
		width: 690rpx;
		height: calc(100vh - 220rpx);
		margin-top: 20rpx;
	}

	.popupStyle-header {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.popupStyle {
		width: 100%;
		height: 500rpx;
	}

	.imp-block1-1 {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #D8D8D8;
	}

	.imp-Custom2 {
		width: 507rpx;
		height: 248rpx;
		border: 1px solid #E2E2E2;
		border-radius: 32rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.imp-Custom1 {
		width: 305rpx;
		height: 183rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.imp-block18 {
		width: 100%;
		height: 101rpx;
		display: flex;
		justify-content: flex-start;
	}

	.imp-block17 {
		width: 100%;
		height: 74rpx;
		font-size: 24rpx;
		color: #1D1D1D;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.imp-block16 {
		width: 100%;
		height: 318rpx;
		border-radius: 32rpx;
		/* background: rgba(0, 0, 0, 0.1); */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.imp-block15 {
		width: 100%;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #1D1D1D;
	}

	.imp-block14-upload {
		width: 305rpx;
		height: 183rpx;
		border-radius: 12rpx;
		border: 1px solid #E2E2E2;
	}

	.imp-block14 {
		width: 100%;
		height: 184rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.imp-block13 {
		width: 100%;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #1D1D1D;
		font-size: 24rpx;
	}

	.imp-block12 {
		width: 630rpx;
		min-height: 316rpx;
		border-radius: 32rpx;
		background: #F6F7FB;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.imp-block11 {
		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;

	}

	.imp-one {
		width: 20rpx;
		height: 3rpx;
		border-radius: 3rpx;
		background: #999999;
		font-size: 24rpx;
		color: #1D1D1D;
	}

	.imp-block10 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F6F7FB;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.imp-block9 {
		width: 187rpx;
		height: 40rpx;
		border-radius: 40rpx;
		background: #F6F7FB;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.imp-block8 {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.imp-block7 {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.imp-block6 {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;

	}

	.imp-block5 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.imp-block4 {
		width: 530rpx;
		min-height: 141rpx;
		background-color: #FFFFFF;
		border-radius: 17rpx;
		margin-top: 18rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.imp-block3 {
		width: 630rpx;
		min-height: 245rpx;
		border-radius: 20rpx;
		background: #F6F7FB;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.imp-block2 {
		width: 100%;
		min-height: 285rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.imp-flex-1 {
		min-height: 85rpx;
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #1D1D1D;
		margin-right: 50rpx;
	}

	.imp-flex {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #1D1D1D;
		margin-right: 50rpx;

	}

	.imp-block1-2 {
		width: 100%;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #D8D8D8;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.imp-block1 {
		width: 100%;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #D8D8D8;
	}

	.imp-but {
		width: 544rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%), #5282E6;
		color: #FFFFFF;
	}

	.imp-block {
		width: 690rpx;
		min-height: 2000rpx;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 42rpx 30rpx 42rpx 30rpx;
		box-sizing: border-box;
	}

	.imp-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}

	/deep/ .u-border-bottom:after {
		border-bottom-width: 0 !important;
	}

	/deep/.content {
		margin: 0
	}

	/deep/.container-list .common .content .lable-text {
		font-size: 12px;
		width: 100%;
	}

	/deep/.u-navbar-content-title {
		width: 80% !important;
		left: 10% !important;
		right: 10% !important;
	}
</style>